<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>书城首页</title>
    <base th:href="@{/}"/>
    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/iconfont.css" />
    <link rel="stylesheet" href="static/css/index.css" />
    <link rel="stylesheet" href="static/css/swiper.min.css" />
    <!-- 引入vue -->
    <script src="static/script/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="static/script/axios.js" type="text/javascript" charset="utf-8"></script>
    <!--    引入jquery-->
    <script src="static/script/jquery-1.7.2.js" type="text/javascript" charset="utf-8"></script>

    <style>
      .header-nav ul li a {
        font-size: 25px;
      }

      .header-nav ul li a i {
        font-size: 25px;
        text-align: center;
      }

      .header-nav ul li {
        margin: 0 20px;
        padding-top: 9px;
      }
    </style>

  </head>
  <body>
    <div id="app">
      <div class="topbar">
        <div class="w">
          <div class="topbar-left">
            <i>送至:</i>
            <i>北京</i>
            <i class="iconfont icon-ai-arrow-down"></i>
          </div>

          <!--登录前的⻛格-->
          <div class="topbar-right" th:if="${session.loginUser == null && session.registerUser == null}">
            <a href="user?method=toLoginPage" class="login">登录</a>
            <a href="user?method=toRegisterPage" class="register">注册</a>
            <a href="protected/cart?method=toCartPage" class="cart iconfont icon-gouwuche"> 购物⻋
            <div class="cart-num" v-text="totalCount">3</div>
            </a>
            <a href="admin?method=toManagerPage" class="admin">后台管理</a>
          </div>
          <!--登录前的⻛格-->
          <!--登录后⻛格-->
          <div class="topbar-right" th:if="${session.loginUser != null}">
            <span>欢迎你<b th:text="${session.loginUser.userName}">Drimwai</b></span>
            <a href="user?method=logout" class="register">注销</a>
            <a href="protected/cart?method=toCartPage" class="cart iconfont icon-gouwuche"> 购物⻋
            <div class="cart-num" v-text="totalCount">3</div>
            </a>
            <a href="admin?method=toManagerPage" class="admin">后台管理</a> </div>
          <!--登录后⻛格-->
<!--          &lt;!&ndash;注册成功后⻛格&ndash;&gt;-->
<!--          <div class="topbar-right" th:if="${session.registerUser != null}">-->
<!--            <span>欢迎你<b th:text="${session.registerUser.userName}">Drimwai</b></span>-->
<!--            <a href="user?method=logout" class="register">注销</a>-->
<!--            <a href="protected/cart?method=toCartPage" class="cart iconfont icon-gouwuche"> 购物⻋-->
<!--              <div class="cart-num"  v-text="totalCount">3</div>-->
<!--            </a>-->
<!--            <a href="admin?method=toManagerPage" class="admin">后台管理</a> </div>-->

        </div>
      </div>
      <div class="header w">
        <a href="#" class="header-logo"></a>
        <div class="header-nav">
          <ul>
            <li><a href="bookManager?method=page&typeId=006001"><i class="iconfont icon-java"></i>java</a></li>
            <li><a href="bookManager?method=page&typeId=006002"><i class="iconfont icon-h5"></i>h5</a></li>
            <li><a href="bookManager?method=page&typeId=006004"><i class="iconfont icon-python"></i>python</a></li>
            <li><a href="bookManager?method=page&typeId=006005"><i class="iconfont icon-tianchongxing-"></i>pm</a></li>
            <li><a href="bookManager?method=page&typeId=006003"><i class="iconfont icon-php_elephant"></i>php</a></li>
            <li><a href="bookManager?method=page&typeId=006006"><i class="iconfont icon-go"></i>go</a></li>
          </ul>
        </div>
        <div class="header-search">
        <input type="text" id="keyInput" placeholder="十万个为什么" value="" />
        <button class="iconfont icon-search" onclick="getpageByKey(1)"></button>
      </div>
      </div>
      <div class="books-list ">
        <div class="w">
          <div class="list">
            <div class="list-header">
              <div class="title">图书列表</div>
              <div class="price-search">
                <span>价格:</span>
                <input type="text" value="" id="minPrice">
                <span>-元</span>
                <input type="text" value="" id="maxPrice">
                <span>元</span>
                <button onclick="getpageByPrice(1)">查询</button>
              </div>
            </div>

            <div class="list-content" th:if="${#lists.isEmpty(page.pageItems)}"> 图书列表为空，无法进行购买!!!</div>
            <div class="list-content" th:unless="${#lists.isEmpty(page.pageItems)}">
              <div class="list-item" th:each="book: ${page.pageItems}">
                <img src="static/uploads/huozhe.jpg" th:src="${book.imgPath}" alt="">
                <p><span>书名:</span><span th:text="${book.bookName}">活着</span></p>
                <p><span>作者:</span><span th:text="${book.author}">余华</span></p>
                <p><span>价格:</span><span th:text="${book.price}">¥66.6</span></p>
                <p><span>销量:</span><span th:text="${book.sales}">230</span></p>
                <p><span>库存:</span><span th:text="${book.stock}">1000</span></p>
                <button onclick="addBookToCart()">加入购物⻋</button>
              </div>
            </div>

            <div class="list-footer">
              <div id="pageNum">
                <span><a href="index.html">首页</a></span>
                <!--当前第一页时，没有上一页-->
                <span th:if="${page.pageNo} gt 1">
                  <a th:href="@{/bookManager(method='page',pageNo=${page.pageNo}-1,typeId=${typeCode})}">上一页</a>
                </span>
                <a th:href="@{/bookManager(method='page',pageNo=1,typeId=${typeCode})}">1</a>
                <li th:if="${page.pageNo}>1"><a th:href="@{/student(method='page',pageNo=2)}">2</a></li>
                <li th:if="${page.pageNo}>2"><a th:href="@{/student(method='page',pageNo=3)}">3</a></li>
                <span th:if="${page.pageNo} lt ${page.pageTotal} ">
                  <a th:href="@{/bookManager(method='page',pageNo=${page.pageNo}+1,typeId=${typeCode})}">下一页</a>
                </span>
                <a th:href="@{/bookManager(method='page',pageNo=${page.pageTotal},typeId=${typeCode})}">末页</a>
              </div>
              共<strong th:text="${page.pageTotal}"></strong>页&nbsp;
              <strong th:text="${page.itemsCount}"></strong>条记录
              <span>到第</span><input  id="pageNoInput" value="" /><span>页</span>
              <button onclick="toPage()">确定</button>

            </div>
          </div>
        </div>
      </div>
       
      </div>
      <div class="cate w">
        <div class="list">
          <a href="" class="list-item">
            <i class="iconfont icon-java"></i>
            <span>java</span>
          </a>
          <a href="" class="list-item"><i class="iconfont icon-h5"></i>h5</a>
          <a href="" class="list-item"><i class="iconfont icon-python"></i>python</a>
          <a href="" class="list-item"><i class="iconfont icon-tianchongxing-"></i>pm</a>
          <a href="" class="list-item"><i class="iconfont icon-php_elephant"></i>php</a>
          <a href="" class="list-item"><i class="iconfont icon-go"></i>go</a>
        </div>
        <a href="" class="img">
          <img src="static/uploads/cate4.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="static/uploads/cate5.jpg" alt="" />
        </a>
        <a href="" class="img">
          <img src="static/uploads/cate6.jpg" alt="" />
        </a>
      </div>

      <div class="bottom">
        <div class="w">
          <div class="top">
            <ul>
              <li>
                <a href="">
                  <img src="static/img/bottom1.png" alt="">
                  <span>大咖级讲师亲自授课</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom.png" alt="">
                  <span>课程为学员成长持续赋能</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom2.png" alt="">
                  <span>学员真是情况大公开</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="content">
            <dl>
              <dt>关于我们</dt>
              <dd>教育理念</dd>
              <!-- <dd>名师团队</dd>
              <dd>学员心声</dd> -->
            </dl>
            <dl>
              <dt>资源下载</dt>
              <dd>视频下载</dd>
              <!-- <dd>资料下载</dd>
              <dd>工具下载</dd> -->
            </dl>
            <dl>
              <dt>加入我们</dt>
              <dd>招聘岗位</dd>
              <!-- <dd>岗位介绍</dd>
              <dd>招贤纳师</dd> -->
            </dl>
            <dl>
              <dt>联系我们</dt>
              <dd>https://www.drimwai.com<dd>
            </dl>
          </div>
        </div>
        <div class="down">
          Drimwai's Bookstore.Copyright ©2021
        </div>
      </div>
    </div>


    <script src="static/script/swiper.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    </script>

    <!-- vue代码 -->
    <script>
      var vue = new Vue({
        "el":"#app",
        "data":{
          "totalCount":0
        },
        "methods":{
          addBookToCart(){
            //获取bookId: bookId绑定在当前标签的value属性上
            // event.target就表示拿到当前标签
            var bookId = event.target.value;
            //发送异步请求:添加书进购物⻋
            axios({
              "method":"POST",
              "url":"protected/cart",
              "params":{
                "method":"addCartItem",
                "id":bookId
              }
            }).then(response => {
              if (response.data.flag){
              //添加购物⻋成功
              this.totalCount = response.data.resultData
              alert("添加购物⻋成功")
            } else {
                if (response.data.message == "unLogin") {
                  location.href = "user?method=toLoginPage"
                } else {
                  //说明显示购物⻋信息失败
                  alert("显示购物⻋信息失败")
                }
              }
            })
          },
          //获取购物⻋中的商品总数
          getTotalCount(){
            //发送异步请求给CartServlet,获取购物⻋中的商品总数
            axios({
              "method":"POST",
              "url":"protected/cart",
              "params":{
                "method":"getTotalCount"
              }
            }).then(response => {
              if (response.data.flag) {
                //将服务器端响应的商品总数赋值给前端的数据模型totalCount
                this.totalCount = response.data.resultData
              }else {
                //判断message是否是unLogin
                if(response.data.message != "unLogin"){
                  //获取失败
                  layer.msg("获取购物⻋商品总数失败")
                }
              }
            })
          }
        },
        created(){
          //获取购物⻋中的商品总数，并赋值给数据模型totalcount
          // 每次刷新都会走这个钩子函数
          // 发送异步请求，获取购物⻋的商品总数，并且将商品总数赋给this.totalCount
          window.addBookToCart=this.addBookToCart;
          axios({
            "method": "post",
            "url": "protected/cart",
            "params": {
              "method": "getTotalCount"
            }
          }).then(response =>{
            if(response.data.flag){
              this.totalCount = response.data.resultData
            }
          })

        }
      });

      function toPage() {
          var pageNo = $("#pageNoInput").val();
          load(pageNo);
      }
    </script>
<!--    JQuery     -->
    <script>
        //  jquery 价格条件查询
        function getpageByPrice(currentPage) {
            //发送ajax请求
            var minPrice=$("#minPrice").val();
            var maxPrice= $("#maxPrice").val();
            $.get("http://localhost:8080/bookstore/bookManager", {
                pageNo: currentPage,
                min:minPrice,
                max:maxPrice,
                method: 'pageByPrice'
            }, function (pb) {
                //解析Pagebean数据，展示到页面上
                //分页工具条数据展示
                //1.1展示总页码
                $("#totalPage").html(pb.pageTotal);
                //$("#currentPage").html(pb.pageNo);
                $("#bookCount").html(pb.itemsCount);
                $("#pageNoInput").attr("value",pb.pageNo);
                $("#minPrice").attr("value",minPrice);
                $("#maxPrice").attr("value",maxPrice);
                var spans = "";
                //计算上一页的页码
                var beforeNum = pb.pageNo - 1;
                if (beforeNum <= 0) {
                    beforeNum = 1;
                }
                //首页
                var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
                spans += first;
                //上一页
                var pre = '<span οnclick="javascript:getpageByPrice('+beforeNum+')"><a href="javascript:getpageByPrice('+beforeNum+'); void(0);">上一页</a></span>';
                spans += pre;
                //1.2展示分页页码
                /*
                一共展示10个页码，能够达到前5后4的效果
                如果前面不够5个，后面补齐总数到10个
                如果后面不足4个，前边补齐总数到10个
                */
                //定义开始位置 begin，结束位置 end
                var begin;
                var end;
                //要显示10个页码
                if (pb.pageTotal < 10) {
                    //如果总页码都没有10页，就显示全部
                    begin = 1;
                    end = pb.pageTotal;
                } else {
                    //总页码超过10页
                    begin = pb.pageNo - 5;
                    end = pb.pageNo + 4;
                    //如果前边不够5个，后边补齐10个
                    if (begin < 1) {
                        begin = 1;
                        end = begin + 9;
                    }
                    //如果后边不足4个，前面补齐10个
                    if (end > pb.pageTotal) {
                        end = pb.pageTotal;
                        begin = end - 9;
                    }
                }
                for (var i = begin; i <= end; i++) {
                    var span;
                    //判断当前页码是否等于i
                    //创建不同格式的页码li
                    if (pb.pageNo == i) {
                        span = ' <a href="javascript:getpageByPrice('+i+'); void(0);" class="active" οnclick="getpageByPrice('+i+')" id="page '+i+' ">' + i + '</a>';
                    } else {
                        span = ' <a href="javascript:getpageByPrice('+i+'); void(0);" οnclick="getpageByPrice('+i+')" id="page '+i+' ">' + i + '</a>';
                    }
                    spans += span;
                }
                var nextPage = pb.pageNo + 1;
                if (nextPage > pb.pageTotal) {
                    nextPage = pb.pageTotal;
                }
                var next = ' <span οnclick="javascript:getpageByPrice('+nextPage+')" ><a href="javascript:getpageByPrice('+nextPage+'); void(0);">下一页</a></span>';
                var last = ' <span οnclick="javascript:getpageByPrice('+pb.pageTotal+')"><a href="javascript:getpageByPrice('+pb.pageTotal+'); void(0);">  末页</a></span>';
                spans += next;
                spans += last;
                $("#pageNum").html(spans);
                //列表数据展示
                var book_ps = "";
                for (var i = 0; i < pb.pageItems.length; i++) {
                    var book = pb.pageItems[i];
                    var p ='<div class="list-item">' +
                        '<img src='+book.imgPath+' alt="" >\n'  +
                        '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                        '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                        '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                        '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                        '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                        '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                        '</div>'
                    book_ps += p;
                }
                $(".list-content").html(book_ps);
            });
        };
        //  jquery 分类查询
        function getpageByType(currentPage,t_id) {
            //发送ajax请求
            $.get("http://localhost:8080/bookstore/bookManager", {
                pageNo: currentPage,
                typeId: t_id,
                method: 'pageByType'
            }, function (pb) {
                //解析Pagebean数据，展示到页面上
                //分页工具条数据展示
                //1.1展示总页码
                $("#totalPage").html(pb.pageTotal);
                $("#bookCount").html(pb.itemsCount);
                $("#pageNoInput").attr("value",pb.pageNo);
                var spans = "";
                //计算上一页的页码
                var beforeNum = pb.pageNo - 1;
                if (beforeNum <= 0) {
                    beforeNum = 1;
                }
                //首页
                var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
                spans += first;
                //上一页
                var pre = '<span οnclick="javascript:getpageByType('+beforeNum+','+t_id+')"><a href="javascript:getpageByType('+beforeNum+'); void(0);">上一页</a></span>';
                spans += pre;
                //1.2展示分页页码
                /*
                一共展示10个页码，能够达到前5后4的效果
                如果前面不够5个，后面补齐总数到10个
                如果后面不足4个，前边补齐总数到10个
                */
                //定义开始位置 begin，结束位置 end
                var begin;
                var end;
                //要显示10个页码
                if (pb.pageTotal < 10) {
                    //如果总页码都没有10页，就显示全部
                    begin = 1;
                    end = pb.pageTotal;
                } else {
                    //总页码超过10页
                    begin = pb.pageNo - 5;
                    end = pb.pageNo + 4;
                    //如果前边不够5个，后边补齐10个
                    if (begin < 1) {
                        begin = 1;
                        end = begin + 9;
                    }
                    //如果后边不足4个，前面补齐10个
                    if (end > pb.pageTotal) {
                        end = pb.pageTotal;
                        begin = end - 9;
                    }
                }
                for (var i = begin; i <= end; i++) {
                    var span;
                    //判断当前页码是否等于i
                    //创建不同格式的页码li
                    if (pb.pageNo == i) {
                        span = ' <a href="javascript:getpageByType('+i+','+t_id+'); void(0);" class="active" οnclick="getpageByType('+i+','+t_id+')" id="page '+i+' ">' + i + '</a>';
                    } else {
                        span = ' <a href="javascript:getpageByType('+i+','+t_id+'); void(0);" οnclick="getpageByType('+i+')" id="page '+i+','+t_id+' ">' + i + '</a>';
                    }
                    spans += span;
                }
                var nextPage = pb.pageNo + 1;
                if (nextPage > pb.pageTotal) {
                    nextPage = pb.pageTotal;
                }
                var next = ' <span οnclick="javascript:getpageByType('+nextPage+','+t_id+')" ><a href="javascript:getpageByType('+nextPage+','+t_id+'); void(0);">下一页</a></span>';
                var last = ' <span οnclick="javascript:getpageByType('+pb.pageTotal+','+t_id+')"><a href="javascript:getpageByType('+pb.pageTotal+','+t_id+'); void(0);">  末页</a></span>';
                spans += next;
                spans += last;
                $("#pageNum").html(spans);
                //列表数据展示
                var book_ps = "";
                for (var i = 0; i < pb.pageItems.length; i++) {
                    var book = pb.pageItems[i];
                    var p ='<div class="list-item">' +
                        '<img src='+book.imgPath+' alt="" >\n'  +
                        '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                        '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                        '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                        '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                        '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                        '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                        '</div>'
                    book_ps += p;
                }
                $(".list-content").html(book_ps);
            });
        };
        // jquery 关键字搜索查询
        function getpageByKey(currentPage) {
          var keyVal=$("#keyInput").val();
          //发送ajax请求
          $.get("http://localhost:8080/bookstore/bookManager", {
            pageNo: currentPage,
            key: keyVal,
            method: 'pageByKey'
          }, function (pb) {
            //解析Pagebean数据，展示到页面上
            //分页工具条数据展示
            //1.1展示总页码
            $("#totalPage").html(pb.pageTotal);
            $("#bookCount").html(pb.itemsCount);
            $("#pageNoInput").attr("value",pb.pageNo);
            $("#keyInput").attr("value",keyVal);
            var spans = "";
            //计算上一页的页码
            var beforeNum = pb.pageNo - 1;
            if (beforeNum <= 0) {
              beforeNum = 1;
            }
            //首页
            var first='<span><a href="javascript:load(1); void(0);" onclick="load(1)">首页</a></span>'
            spans += first;
            //上一页
            var pre = '<span οnclick="javascript:getpageByKey('+beforeNum+')"><a href="javascript:getpageByKey('+beforeNum+'); void(0);">上一页</a></span>';
            spans += pre;
            //1.2展示分页页码
            /*
            一共展示10个页码，能够达到前5后4的效果
            如果前面不够5个，后面补齐总数到10个
            如果后面不足4个，前边补齐总数到10个
            */
            //定义开始位置 begin，结束位置 end
            var begin;
            var end;
            //要显示10个页码
            if (pb.pageTotal < 10) {
              //如果总页码都没有10页，就显示全部
              begin = 1;
              end = pb.pageTotal;
            } else {
              //总页码超过10页
              begin = pb.pageNo - 5;
              end = pb.pageNo + 4;
              //如果前边不够5个，后边补齐10个
              if (begin < 1) {
                begin = 1;
                end = begin + 9;
              }
              //如果后边不足4个，前面补齐10个
              if (end > pb.pageTotal) {
                end = pb.pageTotal;
                begin = end - 9;
              }
            }
            for (var i = begin; i <= end; i++) {
              var span;
              //判断当前页码是否等于i
              //创建不同格式的页码li
              if (pb.pageNo == i) {
                span = ' <a href="javascript:getpageByKey('+i+'); void(0);" class="active" οnclick="load('+i+')" id="page'+i+'">' + i + '</a>';
              } else {
                span = ' <a href="javascript:getpageByKey('+i+'); void(0);" οnclick="getpageByKey('+i+')" id="page'+i+'">' + i + '</a>';
              }
              spans += span;
            }
            var nextPage = pb.pageNo + 1;
            if (nextPage > pb.pageTotal) {
              nextPage = pb.pageTotal;
            }
            var next = ' <span οnclick="javascript:getpageByKey('+nextPage+')" ><a href="javascript:getpageByKey('+nextPage+'); void(0);">下一页</a></span>';
            var last = ' <span οnclick="javascript:getpageByKey('+pb.pageTotal+')"><a href="javascript:getpageByKey('+pb.pageTotal+'); void(0);">  末页</a></span>';
            spans += next;
            spans += last;
            $("#pageNum").html(spans);
            //列表数据展示
            var book_ps = "";
            for (var i = 0; i < pb.pageItems.length; i++) {
              var book = pb.pageItems[i];
              var p ='<div class="list-item">' +
                      '<img src='+book.imgPath+' alt="" >\n'  +
                      '<p><span>书名:</span><span>'+book.bookName+'</span></p>\n'+
                      '<p><span>作者:</span><span>'+book.author+'</span></p>\n'+
                      '<p><span>价格:</span><span>'+book.price+'</span></p>\n'+
                      '<p><span>销售:</span><span>'+book.sales+'</span></p>\n'+
                      '<p><span>库存:</span><span>'+book.stock+'</span></p>\n'+
                      '<button value="'+book.bookId+'" onclick="addBookToCart()" >加入购物⻋</button>\n'+
                      '</div>'
              book_ps += p;
            }
            $(".list-content").html(book_ps);

          });
          // var currentId="#page"+currentPage;
          // $("page1").style.color="#39987c";
        };

    </script>
  </body>
</html>
